<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
    <title>Vue</title>

</head>

<body>
    <div class="container">
        <div class="col-md-6 col-md-offset-3">
            <h1>Vue demo</h1>
            <div id="app">
                <table class="table table-hover" v-cloak>
                    <thead>
                        <tr>
                            <th class="text-right" @click="sortBy('id')">序号</th>
                            <th class="text-right" @click="sortBy('name')">书名</th>
                            <th class="text-right" @click="sortBy('author')">作者</th>
                            <th class="text-right" @click="sortBy('price')">价格</th>
                            <th class="text-right">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="book in books | orderBy sortparam">
                            <td class="text-right">{{book.id}}</td>
                            <td class="text-right">{{book.name}}</td>
                            <td class="text-right">{{book.author}}</td>
                            <td class="text-right">{{book.price}}</td>
                            <template v-if="book.id%2==0">
                                <td class="text-right">
                                    <button type="button" class="btn btn-success" @click="delBook(book)">删除</button>
                                </td>
                            </template>
                            <template v-else>
                                <td class="text-right">
                                    <button type="button" class="btn btn-danger" @click="delBook(book)">删除</button>
                                </td>
                            </template>
                        </tr>
                        <tr>
                            <td class="text-right" colspan="5">
                                <h4>总价:{{sum}}</h4></td>
                        </tr>
                    </tbody>
                </table>
                <div id="add-book">
                    <legend>添加书籍</legend>
                    <div class="form-group">
                        <label for="">书名</label>
                        <input type="text" class="form-control" v-model="book.name">
                    </div>
                    <div class="form-group">
                        <label for="">作者</label>
                        <input type="text" class="form-control" v-model="book.author" >
                    </div>
                    <div class="form-group">
                        <label for="">价格</label>
                        <input type="text" class="form-control" v-model="book.price">
                    </div>
                    <button class="btn btn-primary btn-block" v-on:click="addBook()">添加</button>
                </div>
                <br>
            </div>
        </div>
    </div>


    <div id="app" :style = "style">
      <p v-if="seen">{{ message }}</p>
      <p v-else>{{ message2 }}</p>
      <input v-model="message">
      
      <ol>
          <li v-for="element in list">
          {{element.text}}
          </li>
      </ol>
      <button v-on:click="oclick()">点击</button>
      
      <div @click="show($event)">点我</div>

      
    </div>
    <div id="hty_tes">
    {{message}}
    </div>


    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue!',
            seen:true,
            list:[
                {text:'1111'},
                {text:'2222'},
                {text:'3333'}
            ],
            message2: 'I am else',
            style:{color:'red',fontSize:'30px'}
          },
          methods:{
              oclick:function(){
                  alert("testOnClick");
              },
              show:function(ev){
                alert(ev.clientX)
              }
          }          

        });
        var hty = new Vue({
        	el: '#hty_tes',
        	data:{
        		message:'hutingyu'
        	}
        })
    </script>
</body>
</html>